<script setup lang="ts">
import ConfirmBoxCard from './ConfirmBoxCard.vue'

export interface RiskCardProps {
  risks?: string[]
}

withDefaults(defineProps<RiskCardProps>(), {})
</script>

<template>
  <confirm-box-card
    title="风险提示"
    body-class="risk-body"
  >
    <li
      v-for="(risk, idx) in risks"
      :key="idx"
    >
      {{ risk }}
    </li>
  </confirm-box-card>
</template>

<style lang="less" scoped>
:deep(.risk-body) {
  color: #fa5566 !important;
  //border: 1px solid var(--cdn-cascader-warning-border);
  background: #ffeae8;
  // border-radius: 8px;
  //   background: var(--danger-1, #FFEAE8)!important;
  //   color: var(--danger-6, #FA5566)!important;
  border-radius: 8px;
  display: flex;
  padding: 8px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  li::marker {
    @apply !mr-0;
  }
}
</style>
